<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>合同详情 - HRM系统</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="stylesheet" th:href="@{/css/contract-view.css}">
</head>
<body>
<div class="dashboard">
    <!-- 顶部栏（与参考样式一致） -->
    <header class="header">
        <div class="logo">HRM系统</div>
        <div class="user-info">
            <span th:text="${currentUser.realName}"></span>
            <span class="role-badge" th:text="${currentUser.roleId.roleName}"></span>
            <a href="/logout" class="logout-btn">退出</a>
        </div>
    </header>

    <main class="contract-view-container">
        <!-- 返回按钮 -->
        <div class="back-container">
            <a th:href="@{/contract}" class="btn btn-back">← 返回合同列表</a>
            <a th:href="@{/home}" class="btn btn-back">← 返回首页</a>
        </div>

        <!-- 页面标题 -->
        <div class="module-header">
            <h1 class="module-title">合同详情</h1>
        </div>

        <!-- 合同基本信息 -->
        <div class="contract-card">
            <div class="contract-header">
                <h2 class="contract-title" th:text="${contract.contractName}"></h2>
                <div class="contract-meta">
                    <span>合同编号：<strong th:text="${contract.contractNumber}"></strong></span>
                    <span>合同类型：<strong th:text="${contract.contractType}"></strong></span>
                    <span>状态：<strong th:text="${contract.status}"></strong></span>
                </div>
            </div>

            <!-- 标准合同内容 -->
            <div class="contract-content">
                <div class="contract-section">
                    <h3>甲方（委托方）：</h3>
                    <p th:text="${contract.signingPartyA.realName} + '（' + ${contract.signingPartyA.departmentID.departmentName} + '）'"></p>
                </div>

                <div class="contract-section">
                    <h3>乙方（受托方）：</h3>
                    <p th:text="${contract.signingPartyB.realName} + '（' + ${contract.signingPartyB.departmentID.departmentName} + '）'"></p>
                </div>

                <div class="contract-section">
                    <h3>合同期限：</h3>
                    <p th:text="${#temporals.format(contract.effectiveDate, 'yyyy年MM月dd日')} + '至' + ${#temporals.format(contract.expiryDate, 'yyyy年MM月dd日')}"></p>
                </div>

                <div class="contract-section" th:if="${contract.showSensitiveFields}">
                    <h3>违约金条款：</h3>
                    <p>违约金利率：<span th:text="${contract.penaltyRate}"></span></p>
                    <p th:if="${contract.status == '逾期'}">当前违约金金额：<span th:text="${contract.penaltyAmount}"></span>元</p>
                </div>

                <!-- 合同主要内容部分 -->
                <div class="contract-section">
                    <h3>合同主要内容：</h3>

                    <!-- 劳动合同 -->
                    <div th:if="${contract.contractType.name() == '劳动合同'}">
                        <p>根据《中华人民共和国劳动法》和《中华人民共和国劳动合同法》，甲乙双方签订本劳动合同，共同遵守以下条款：</p>

                        <h4>一、工作内容</h4>
                        <p>乙方同意在甲方从事<span class="highlight" th:text="${contract.workPosition}"></span>工作，
                            工作地点为<span class="highlight" th:text="${contract.workLocation}"></span>。</p>

                        <h4>二、合同期限</h4>
                        <p>合同期限自<span th:text="${#temporals.format(contract.effectiveDate, 'yyyy年MM月dd日')}"></span>至<span th:text="${#temporals.format(contract.expiryDate, 'yyyy年MM月dd日')}"></span>。</p>

                        <h4>三、劳动报酬</h4>
                        <div th:if="${contract.showSensitiveFields}">
                            <p>甲方每月以货币形式支付乙方工资，基本工资为<span class="highlight">[金额]</span>元。</p>
                        </div>
                        <div th:unless="${contract.showSensitiveFields}">
                            <p>薪资标准按照甲方薪酬制度执行，具体见附件。</p>
                        </div>
                    </div>

                    <!-- 委托合同 -->
                    <div th:if="${contract.contractType.name() == '委托合同'}">
                        <p>根据《中华人民共和国民法典》，甲方委托乙方办理相关事务，达成如下协议：</p>

                        <h4>一、委托事项</h4>
                        <p>甲方委托乙方处理<span class="highlight" th:text="${contract.entrustContent}"></span>。</p>

                        <h4>二、委托权限</h4>
                        <p>乙方在<span class="highlight" th:text="${contract.entrustScope}"></span>范围内代表甲方处理上述事项。</p>
                    </div>

                    <!-- 服务协议 -->
                    <div th:if="${contract.contractType.name() == '服务协议'}">
                        <p>根据《中华人民共和国民法典》，甲方接受乙方提供的服务，达成如下协议：</p>

                        <h4>一、服务内容</h4>
                        <p th:utext="${contract.serviceContent}"></p>

                        <h4>二、服务期限</h4>
                        <p>自<span th:text="${#temporals.format(contract.effectiveDate, 'yyyy年MM月dd日')}"></span>至<span th:text="${#temporals.format(contract.expiryDate, 'yyyy年MM月dd日')}"></span>。</p>
                    </div>

                    <!-- 通用条款 -->
                    <div class="general-terms">
                        <h4>争议解决</h4>
                        <p>本协议履行过程中发生的争议，双方应协商解决；协商不成的，任何一方均可向甲方所在地人民法院提起诉讼。</p>

                        <h4>其他</h4>
                        <p>1. 本合同一式两份，甲乙双方各执一份，具有同等法律效力。</p>
                        <p>2. 本合同自双方签字盖章之日起生效。</p>
                    </div>
                </div>

                <!-- 电子签名验证 -->
                <div class="contract-section signature-section">
                    <h3>电子签名验证：</h3>
                    <div th:classappend="${contract.isSignatureValid} ? 'signature-valid' : 'signature-invalid'">
                        <span th:text="${contract.isSignatureValid} ? '✓ 电子签名已验证（区块链存证）' : '✗ 电子签名验证失败'"></span>
                        <a href="#" class="btn-verify" th:if="${!contract.isSignatureValid}">重新验证</a>
                    </div>
                </div>

                <!-- 法律条款解析 -->
                <div class="contract-section legal-section">
                    <h3>相关法律条款解析：</h3>
                    <div class="legal-clauses" th:utext="${contract.legalClauseAnalysis}"></div>
                </div>
            </div>

            <!-- 合同履行记录 -->
            <div class="fulfillment-records">
                <h3>履行记录</h3>
                <table>
                    <thead>
                    <tr>
                        <th>类型</th>
                        <th>日期</th>
                        <th>金额</th>
                        <th>描述</th>
                        <th>操作人</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="record : ${contract.fulfillments}">
                        <td th:text="${record.fulfillmentType}"></td>
                        <td th:text="${#temporals.format(record.fulfillmentDate, 'yyyy-MM-dd')}"></td>
                        <td th:text="${record.amount != null} ? ${record.amount} + '元' : '-'"></td>
                        <td th:text="${record.description}"></td>
                        <td th:text="${record.operator.realName}"></td>
                    </tr>
                    <tr th:if="${contract.fulfillments.isEmpty()}">
                        <td colspan="5" class="no-records">暂无履行记录</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <!-- 合同附件列表 -->
            <div class="attachment-records">
                <h3>合同附件</h3>
                <table>
                    <thead>
                    <tr>
                        <th>文件名</th>
                        <th>类型</th>
                        <th>上传人</th>
                        <th>上传时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="attachment : ${attachments}">
                        <td th:text="${attachment.fileName}"></td>
                        <td th:text="${attachment.fileType}"></td>
                        <td th:text="${attachment.uploaderName}"></td>
                        <td th:text="${#temporals.format(attachment.createTime, 'yyyy-MM-dd HH:mm')}"></td>
                        <td>
                            <a th:href="@{'/contract/download/' + ${attachment.attachmentId}}"
                               class="btn-download">下载</a>
                            <a th:if="${attachment.fileType.startsWith('image/') || attachment.fileType == 'application/pdf'}"
                               th:href="@{'/contract/preview/' + ${attachment.attachmentId}}"
                               target="_blank"
                               class="btn-preview">预览</a>
                        </td>
                    </tr>
                    <tr th:if="${attachments.isEmpty()}">
                        <td colspan="5" class="no-records">暂无附件</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </main>
</div>
<script th:src="@{/js/contract-view.js}"></script>
</body>
</html>